<template>
    <div style="    display: flex;
    flex-direction: column;
    align-items: center;">
        <div class="top">
            <div class="center">
                <h1>Plan Your Trip</h1>
                <p>Discover the perfect travel for you</p>
            </div>
        </div>
        <el-form  ref="form" label-position="top" :model="queryParam" :rules="rules" hide-required-asterisk="true" style=" width: 1240px;
        max-width: 1240px;
        min-width: 720px;display: flex;justify-content: center">

                <div style="width: 240px">
                    <el-form-item label="Destination" prop="region">

                        <el-select
                        v-model="queryParamregiom"
                        filterable
                        style="width: 240px"
                        placeholder="where to look"
                        clearable
                        popper-class="eloption"
                        @change="setregion"
                        :popper-append-to-body="true"
                      >
                      <template #prefix>
                        <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                            <path fill="currentColor"
                                d="M512 928c23.936 0 117.504-68.352 192.064-153.152C803.456 661.888 864 535.808 864 416c0-189.632-155.84-320-352-320S160 226.368 160 416c0 120.32 60.544 246.4 159.936 359.232C394.432 859.84 488 928 512 928m0-435.2a64 64 0 1 0 0-128 64 64 0 0 0 0 128m0 140.8a204.8 204.8 0 1 1 0-409.6 204.8 204.8 0 0 1 0 409.6">
                            </path>
                        </svg>
                    </template>
                        <el-option
                          v-for="item in whereoptions"
                          :key="item.region"
                          :label="item.region"
                          :value="item.id"
                        />
                      </el-select>

                    </el-form-item>
                    </div>
          
                    <el-form-item label="Date" prop="date" style="width: 350px;">
                        <el-date-picker  format="MM-DD" start-placeholder="Start date" end-placeholder="End date"
                            :locale="enLocal" v-model="queryParam.date" type="daterange" placeholder="Select date" />

                    </el-form-item>

            
                    <div style="width: 314px;display: flex;">
                    <el-form-item label="Person coming with you" >
                        <el-select v-model="queryParam.adults" placeholder="Select" style="width: 150px;">
                            <template #prefix>
                                <div style="display: flex;justify-content: center;">
                                <svg width="17" height="17" viewBox="0 0 19 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M9.24232 9.6C6.53148 9.55804 4.46068 7.37884 4.44234 4.8C4.48712 2.11334 6.68306 0.01884 9.24232 0C11.9556 0.1026 14.023 2.1794 14.0423 4.8C13.989 7.48878 11.8042 9.5818 9.24232 9.6ZM13.1232 10.5958C16.535 10.6356 18.2651 13.6284 18.2808 16.6211V24H14.9361L14.9361 17.5149C14.8547 17.0666 14.551 16.9146 14.2728 16.9585C14.0124 16.9997 13.7742 17.2125 13.7616 17.5149V24H4.46822V17.5149C4.39708 17.0882 4.12566 16.9242 3.8616 16.9407C3.57884 16.9585 3.30454 17.1834 3.29374 17.5149V24H0.000141525V16.6211C-0.0194585 13.4316 1.99816 10.6194 5.18288 10.5958H13.1232Z"
                                        fill="black" />
                                </svg>
                                <div class="label" style="font-size: 14px;margin-left: 5px;line-height: 24px;">Adults</div></div>
                            </template>
                            <el-option v-for="item in aoptions" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-top: 30px;">
                        <el-select v-model="queryParam.children" placeholder="Select" style="width: 150px;">
                            <template #prefix>
                                <div style="display: flex;justify-content: center;">
                                <svg width="17" height="24" viewBox="0 0 25 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M10.2808 10C10.2808 9.80222 10.2221 9.60888 10.1122 9.44443C10.0024 9.27998 9.84618 9.15181 9.66345 9.07612C9.48072 9.00043 9.27966 8.98063 9.08567 9.01921C8.89169 9.0578 8.71351 9.15304 8.57366 9.29289C8.43381 9.43274 8.33857 9.61093 8.29998 9.80491C8.26139 9.99889 8.2812 10.2 8.35689 10.3827C8.43257 10.5654 8.56075 10.7216 8.72519 10.8315C8.88964 10.9413 9.08298 11 9.28077 11C9.54598 11 9.80034 10.8946 9.98787 10.7071C10.1754 10.5196 10.2808 10.2652 10.2808 10ZM14.7808 14.06C14.6672 13.9935 14.5417 13.95 14.4113 13.9321C14.2809 13.9142 14.1483 13.9222 14.021 13.9556C13.8938 13.9891 13.7743 14.0473 13.6696 14.127C13.5649 14.2067 13.4769 14.3062 13.4108 14.42C13.2972 14.6196 13.1329 14.7856 12.9344 14.901C12.7359 15.0165 12.5104 15.0773 12.2808 15.0773C12.0511 15.0773 11.8256 15.0165 11.6271 14.901C11.4287 14.7856 11.2643 14.6196 11.1508 14.42C11.0846 14.3062 10.9966 14.2067 10.8919 14.127C10.7872 14.0473 10.6678 13.9891 10.5405 13.9556C10.4132 13.9222 10.2806 13.9142 10.1502 13.9321C10.0199 13.95 9.8943 13.9935 9.78077 14.06C9.55203 14.1919 9.38476 14.4089 9.31544 14.6637C9.24613 14.9185 9.28039 15.1904 9.41077 15.42C9.70081 15.9248 10.1189 16.3442 10.6228 16.6358C11.1267 16.9274 11.6986 17.081 12.2808 17.081C12.863 17.081 13.4349 16.9274 13.9388 16.6358C14.4427 16.3442 14.8607 15.9248 15.1508 15.42C15.2811 15.1904 15.3154 14.9185 15.2461 14.6637C15.1768 14.4089 15.0095 14.1919 14.7808 14.06ZM15.2808 9C15.083 9 14.8896 9.05865 14.7252 9.16853C14.5607 9.27841 14.4326 9.43459 14.3569 9.61732C14.2812 9.80004 14.2614 10.0011 14.3 10.1951C14.3386 10.3891 14.4338 10.5673 14.5737 10.7071C14.7135 10.847 14.8917 10.9422 15.0857 10.9808C15.2797 11.0194 15.4807 10.9996 15.6634 10.9239C15.8462 10.8482 16.0024 10.72 16.1122 10.5556C16.2221 10.3911 16.2808 10.1978 16.2808 10C16.2808 9.73478 16.1754 9.48043 15.9879 9.29289C15.8003 9.10536 15.546 9 15.2808 9ZM12.2808 2C10.303 2 8.36955 2.58649 6.72506 3.6853C5.08057 4.78412 3.79885 6.3459 3.04197 8.17316C2.28509 10.0004 2.08706 12.0111 2.47291 13.9509C2.85877 15.8907 3.81117 17.6725 5.2097 19.0711C6.60822 20.4696 8.39005 21.422 10.3299 21.8079C12.2697 22.1937 14.2803 21.9957 16.1076 21.2388C17.9349 20.4819 19.4966 19.2002 20.5955 17.5557C21.6943 15.9112 22.2808 13.9778 22.2808 12C22.2808 10.6868 22.0221 9.38642 21.5196 8.17316C21.017 6.95991 20.2804 5.85752 19.3518 4.92893C18.4232 4.00035 17.3209 3.26375 16.1076 2.7612C14.8943 2.25866 13.594 2 12.2808 2ZM12.2808 20C10.4181 20.008 8.61097 19.3658 7.17108 18.1842C5.73119 17.0025 4.74879 15.3554 4.39328 13.5269C4.03778 11.6984 4.33147 9.80322 5.2237 8.16811C6.11592 6.53299 7.55076 5.26047 9.28077 4.57C9.27048 4.71315 9.27048 4.85685 9.28077 5C9.28077 5.79565 9.59684 6.55871 10.1594 7.12132C10.7221 7.68393 11.4851 8 12.2808 8C12.546 8 12.8003 7.89464 12.9879 7.70711C13.1754 7.51957 13.2808 7.26522 13.2808 7C13.2808 6.73478 13.1754 6.48043 12.9879 6.29289C12.8003 6.10536 12.546 6 12.2808 6C12.0155 6 11.7612 5.89464 11.5737 5.70711C11.3861 5.51957 11.2808 5.26522 11.2808 5C11.2808 4.73478 11.3861 4.48043 11.5737 4.29289C11.7612 4.10536 12.0155 4 12.2808 4C14.4025 4 16.4373 4.84285 17.9376 6.34315C19.4379 7.84344 20.2808 9.87827 20.2808 12C20.2808 14.1217 19.4379 16.1566 17.9376 17.6569C16.4373 19.1571 14.4025 20 12.2808 20Z"
                                        fill="black" />
                                        
                                </svg>
                                <div class="label" style="font-size: 14px;margin-left: 5px;line-height: 24px;">Children</div>
                            </div>
                            </template>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled" />
                        </el-select>
                    </el-form-item>
                  
                    </div>
          

        
        
    </el-form>
    <div class="center-btn">
            <el-button type="warning" round @click="goSpend">Next</el-button>
        </div>


    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import enLocal from "element-plus/es/locale/lang/en";
    import { useRouter } from 'vue-router';
    import { scenicList,region } from '@/api/index';
    import { useStore } from 'vuex';
    import Cookies from 'js-cookie';
const store = useStore();
    const router = useRouter();
    const form = ref(null);
    const queryParamregiom = ref(null)
    const  rules= ref({
        region: [
            { required: true, message: "please enter the information", trigger: "blur" },
          ],
          date: [
            { required: true, message: "please enter the information", trigger: "blur" }
          ],
         
    })

    Cookies.remove("events")
    Cookies.remove("plans")
    sessionStorage.removeItem("plans")
    Cookies.remove("setPlanQurry")
    const queryParam = ref({
        where: "",
        date: null,
        adults: '1',
        children: '0',
        single: '0',

    });
    const options = ref([
        {
            value: '0',
            label: '0',
        },
        {
            value: '1',
            label: '1',
        },
        {
            value: '2',
            label: '2'
        },
        {
            value: '3',
            label: '3',
        },
        {
            value: '4',
            label: '4',
        },
        {
            value: '5',
            label: '5',
        }]);

const aoptions = ref([

        {
            value: '1',
            label: '1',
        },
        {
            value: '2',
            label: '2'
        },
        {
            value: '3',
            label: '3',
        },
        {
            value: '4',
            label: '4',
        },
        {
            value: '5',
            label: '5',
        }]);

const list = ref([])
const whereoptions = ref([])
const value = ref([])
const loading = ref(false)
function remoteMethod() {

    region({page:0,size:50}).then(res=>{
    
            whereoptions.value = res
     
    })

}
function setregion(params) {
    for (let index = 0; index < whereoptions.value.length; index++) {
        const element = whereoptions.value[index];
        if(element.id == params){
            console.log(element.region)
            queryParam.value.region = element.region
            queryParam.value.image = element.image
        }
        
    }

}
remoteMethod()
    function goSpend() {
        form.value.validate(valid => {
          if (valid) {
            // 设置查询参数、计划标题
            queryParam.value.title = "Trip to " + queryParam.value.region
            Cookies.set('setPlanQurry', JSON.stringify(queryParam.value), { expires: 7 }); // 7 天过期
            router.push({ path: '/spend', query: queryParam.value });
          }
        });
        
    }
</script>

<style scoped>
    
    .center-btn {
        display: flex;
        justify-content: center;
    }

    .el-button {
        padding: 5px 10px;
        background-color: #FF8820;
        color: #fff;
        border: none;
        margin-top: 15%;
        cursor: pointer;
        width: 150px;
        margin-bottom: 300px;
    }

    .item-col {
        display: flex;
        justify-content: space-evenly;
        width: 250px;
    }

    .top {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .main-center {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .center h1 {
        color: black;
    }

    .label {
        font-weight: bold;
        color: #000;
    }

    .row .row-bg {
        width: 100%;
       
    }

    .item {
        display: flex;
    }

    .svg {
        width: 25px;
        margin-right: 15px;
        color: #000;
    }
</style>
<style lang="css">
    .el-form-item__label{
        color: #000000;
        font-weight: bold;
    }
    .el-input__wrapper {
        box-shadow: 0 0 0 1px #ffffff inset;
    }

    .el-date-editor .el-range__icon {
        color: #000000;
        float: left;
        font-size: 17px;
        height: inherit;
    }

    .el-date-editor.el-input__wrapper {
        box-shadow: 0 0 0 1px #ffffff inset;
    }

    .el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger {
        box-shadow: 0 0 0 1px #ffffff inset;
        /* padding: 0px; */
    }

    .el-icon.el-select__caret.el-select__icon {
        color: #000;
    }
    /* .el-scrollbar{
        height: 250px;
    } */
</style>